<template>
  <div class="edit"> 
    <div class="center">
      <van-uploader disabled>
        <van-image round width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      </van-uploader>
    </div>
  <van-radio-group v-model="checked"  direction="horizontal" style="justify-content: center">
    <van-radio name="1" shape="square">先生</van-radio>
    <van-radio name="2" shape="square">女士</van-radio>
  </van-radio-group>
<div class="center"> 基本信息（必填）  </div>
<van-field input-align="right" v-model="name"  label="姓名" placeholder="请输入" arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写姓名' }]" />
<van-field input-align="right" v-model="date" @click="showDatePop = true" label="生日" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="pro"  @click="showProPop = true" label="职业" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="phone"  label="电话"  type="tel" placeholder="请输入"  arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />

<div class="center"> 教育背景（必填）  </div>   
<van-field input-align="right" v-model="name"  @click="showSchoolPop = true" label="学校" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写姓名' }]" />
<van-field input-align="right" v-model="date"  @click="showEduPop = true" label="学历" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="pro"  label="专业" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="phone"  @click="showDatePop = true"   label="入学年份"  placeholder="请输入" readonly  arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />

<div class="center"> 选填信息  </div>   
<van-field input-align="right" v-model="name"  label="QQ" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写姓名' }]" />
<van-field input-align="right" v-model="date"  label="微信" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="date"  label="邮箱" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
 
<div class="center"> 个人简介  </div>
<van-field input-align="right" v-model="name"  @click="showDescPop = true"  label="自我描述" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写姓名' }]" />
<van-field input-align="right" v-model="date"  label="微信" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />
<van-field input-align="right" v-model="date"  label="邮箱" placeholder="请输入" readonly arrow-direction="right"  right-icon="arrow" :rules="[{ required: true, message: '请填写生日' }]" />

 
<van-popup v-model:show="showDatePop" position="bottom" round> <DatePop @submit="DatePopSubmit"/> </van-popup>
<van-popup v-model:show="showDescPop"  position="bottom" round> <DescPop @submit="DescPopSubmit"/> </van-popup>
<van-popup v-model:show="showEduPop"   position="bottom" round> <EduPop @submit="EduPopSubmit"/></van-popup>
<van-popup v-model:show="showSchoolPop"  position="bottom" round> <SchoolPop @submit="SchoolPopSubmit"/></van-popup>
<van-popup v-model:show="showProPop"   position="bottom" round> <ProPop @submit="ProPopSubmit"/></van-popup>
	
  </div>
</template>
<script>      
import DatePop from './pops/year-pop.vue'
import DescPop from './pops/desc-pop.vue' 
import EduPop from './pops/education-pop.vue' 
import SchoolPop from './pops/school-pop.vue' 
import ProPop from './pops/profession-pop.vue' 
import {mapState,mapMutations} from 'vuex';  
export default {
  name: 'App',
  components:{ DatePop,DescPop,EduPop,SchoolPop,ProPop},
  data(){
    return {
      checked:"1", 
	  currentDate:"",   name:"",  date:"",  pro:"",  phone:"", 
	  showDatePop:false,showDescPop:false,showEduPop:false,showSchoolPop:false,
	  showProPop:false,
    }
  },
  computed:{...mapState(['hash'])},
  created(){

  },
  methods: { ...mapMutations(['SetHash']),
	  DatePopSubmit(){ },
	  DescPopSubmit(){ },
	  EduPopSubmit(){ },
	  SchoolPopSubmit(){ },
	  ProPopSubmit(){ },
  },
  mounted(){  
     this.SetHash(location.hash)
  },
  

}
</script>
<style scoped>
 .edit{ 
	padding:20px 15px 0 15px; 
 }
 
</style>